//based on: https://stackoverflow.com/questions/54335233/how-to-create-a-3-segment-donut-ring-with-css
.box {
  /*coloration*/
  --c1: red;
  --c2: green;
  --c3: blue;
  --m: #fff; /*main background*/
  /**/
  --d: 50px; /*the height of the borders*/
  --s: 5px; /*the white distance*/


  width: 200px;
  height: 200px;
  border-radius: 50%;
  padding: var(--d);
  background: /*first arrow*/
    linear-gradient(to top right,
      var(--c1) calc(50% - var(--s) - 1px), var(--m) calc(50% - var(--s)),
      var(--m) 50%, transparent 51%) calc(50% + 10px) calc(-2*var(--s))/20px calc(var(--d) / 2 + 2 * var(--s)),
    linear-gradient(to bottom right,
      var(--c1) calc(50% - var(--s) - 1px), var(--m) calc(50% - var(--s)),
      var(--m) 50%, transparent 51%) calc(50% + 10px) calc(var(--d)/2)/20px calc(var(--d) / 2 + 2 * var(--s)),
      /*main background*/

    linear-gradient(-35deg, var(--c2) 59%, transparent 60%) bottom left/50% 50%,
    linear-gradient(35deg, var(--c2) 59%, transparent 60%) bottom right/50% 50%,
    linear-gradient(to right, var(--c1) 50%, var(--c3) 0),
    var(--m);
  background-repeat: no-repeat;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.box::before,
.box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  padding: var(--d);
  background: linear-gradient(var(--m), var(--m)) content-box,
  linear-gradient(to top right,
      var(--c) calc(50% - var(--s) - 1px), var(--m) calc(50% - var(--s)),
      var(--m) 50%, transparent 51%) calc(50% + 10px) calc(-2*var(--s))/20px calc(var(--d) / 2 + 2 * var(--s)),
  linear-gradient(to bottom right,
      var(--c) calc(50% - var(--s) - 1px), var(--m) calc(50% - var(--s)),
      var(--m) 50%, transparent 51%) calc(50% + 10px) calc(var(--d)/2)/20px calc(var(--d) / 2 + 2 * var(--s));
  background-repeat: no-repeat;
}

.box::before {
  --c: var(--c2);
  transform: rotate(-125deg);
}

.box::after {
  --c: var(--c3);
  transform: rotate(124deg);
}
